<!-- 首页 -->
<template>
    <view class="home-wrap u-m-b-20">
        <shopro-navbar :isBack="false">
            <text
                slot="content"
                style="color: #000; width: 100%; text-align: center;padding-left: 20rpx;font-size:30rpx"
                @click="userInfo.password?'':denglu()"
            >
                {{'App名称'}}
            </text>
        </shopro-navbar>
        <view class="content-box u-p-10 u-m-l-20 u-m-r-20 u-m-t-30">
            <view class="u-flex u-flex-col kehu-item">
                <view class="swipers">
                    <u-swiper :height="280" borderRadius="20" :list="goodsInfo.images" indicator-pos="bottomRight" mode="number" :interval="3000"></u-swiper>
                </view>
            </view>
            <view class="topic u-flex u-row-between u-p-20 u-m-t-30">
                <view class="topic_left u-flex u-row-center u-col-center u-p-r-20">
                    <image src="/static/images/icons/yixingshi.png"></image>
                </view>
                <view class="topic_right u-flex u-row-between u-col-center">
                    <view class="title_topic">同学，您好，您有新的体育任务，请查收</view>
                    <view class="title_right u-flex u-row-between u-col-center">
                        <view class="point u-m-r-10"></view>
                        <image class="arrow-right" src="/static/images/icons/yixingshi.png"></image>
                    </view>
                </view>
            </view>
            <!--            员工信息-->
            <view class="u-flex u-flex-col u-p-20 yuangong-item">
                <view class="u-flex u-p-10 u-w-100s u-row-between u-flex-wrap top-yuangong u-p-b-20">
                    <view class="u-flex u-flex-col u-row-left u-col-center xinxi-item">
                        <image src="/static/images/icons/yixingshi.png"></image>
                    </view>
                    <view class="u-flex u-flex-col u-row-left u-col-center xinxi-item">
                        <image src="/static/images/icons/yixingshi.png"></image>
                    </view>
                    <view class="u-flex u-flex-col u-row-left u-col-center xinxi-item">
                        <image src="/static/images/icons/yixingshi.png"></image>
                    </view>
                </view>
            </view>
            <u-calendar v-model="showriqi" :mode="mode" @change="changeDate"></u-calendar>
        </view>
    </view>
</template>

<script>

import {mapMutations, mapActions, mapState, mapGetters} from 'vuex';
import uniEcCanvas from '@/components/uni-ec-canvas/uni-ec-canvas.vue'
import * as echarts from 'echarts'

let chart = null
export default {
    components: {
        uniEcCanvas
    },
    data() {
        return {
            goodsInfo: {
                images: [require('@/static/images/lunbo1.jpg'), require('@/static/images/lunbo2.jpg')]
            },
            showriqi:false,
            mode:'date',
            homeData:{},
        };
    },
    computed: {
        ...mapGetters(['isLogin','userInfo']),

    },
    onPullDownRefresh() {

    },

    onShow() {

    },
    onHide() {

    },
    onLoad(options) {
        this.init()
    },
    methods: {
        // 初始化
        init() {
            let day = new Date().getDate();
            let month = new Date().getMonth()+1;
            console.log("===day",day,month)
            this.day = day
            this.getmonth(month)
            this.initdata()
        },
        changeDate(e){
            console.log("====e",e)
            this.day = e.day
           this.getmonth(e.month)
        },
        getmonth(month){
            switch (month) {
                case 1 :
                    this.month = '一月'
                    break;
                case 2 :
                    this.month = '二月'
                    break
                case 3 :
                    this.month = '三月'
                    break
                case 4 :
                    this.month = '四月'
                    break
                case 5 :
                    this.month = '五月'
                    break
                case 6 :
                    this.month = '六月'
                    break
                case 7 :
                    this.month = '七月'
                    break
                case 8 :
                    this.month = '八月'
                    break;
                case 9 :
                    this.month = '九月'
                    break;
                case 10 :
                    this.month = '十月'
                    break;
                case 11 :
                    this.month = '十一月'
                    break;
                case 12 :
                    this.month = '十二月'
                    break;


            }
        },
        initChart(canvas, width, height, canvasDpr) {
            console.log(canvas, width, height, canvasDpr)
            chart = echarts.init(canvas, null, {
                width           : width,
                height          : height,
                devicePixelRatio: canvasDpr
            })
            canvas.setChart(chart)
            chart.setOption(this.baroptions)
            return chart
        },
        initChartBing(canvas, width, height, canvasDpr) {
            console.log(canvas, width, height, canvasDpr)
            chart = echarts.init(canvas, null, {
                width           : width,
                height          : height,
                devicePixelRatio: canvasDpr
            })
            canvas.setChart(chart)
            chart.setOption(this.pieoptions)
            return chart
        },
        denglu() {
            this.$store.dispatch("showAuthModal", "1233");
        },
        initdata(){
            let that = this;
            that
                .$http(
                    "login.home",
                    {
                    },
                    "加载中..."
                )
                .then(res => {
                    if (res.code === 1) {
                        this.homeData = res.data
                    }
                });
        },
        // 路由跳转
        jump(path, parmas) {
            console.log("====1111", path)
            this.$Router.push({
                path : path,
                query: parmas
            });
        },
    }
};
</script>

<style lang="scss" scoped>
.uni-ec-canvas {
    width: 100%;
    height: 400rpx;
    display: block;
}
.uni-ec-canvas-bing {
    width: 100%;
    height: 200rpx;
    display: block;
}
page {
    background: #FFFFFF;
}

.kehu-item {
    border-radius: 20rpx;
    width: 100%;
    .swipers{
        width: 100%;
    }
}
.topic{
    background: #F5F5F5;
    border-radius: 20rpx;
    .topic_left{
        width: 40rpx;
        height: 40rpx;
        image{
            width: 100%;
            height: 100%;
        }
    }
    .topic_right{
        width: 96%;
        .title_right{
            .point{
                width: 10rpx;
                height: 10rpx;
                border-radius: 50%;
                background: #FA3E3E;
            }
            .arrow-right{
                width: 40rpx;
                height: 40rpx;
            }
        }

    }
}
.yuangong-item {
    .xinxi-item{
        width: 48%;
        height: 180rpx;
        image{
            width: 100%;
            height: 100%;
        }
    }

}

.baobiao-item {
    background: linear-gradient(180deg, #F1F6FF 0%, rgba(255, 255, 255, 0.9) 100%);
    box-shadow: 0px 2px 4px 0px rgba(53, 110, 253, 0.05);

    .time-day {
        width: 100rpx;
        background: #2A6CFF;
        color: #fff;
        padding: 6rpx 8rpx;
    }

    .time-month {
        width: 100rpx;
        background: linear-gradient(180deg, #F1F6FF 0%, rgba(255,255,255,0.9) 100%);
        box-shadow: 0px 2px 4px 0px rgba(53,110,253,0.05);
        border-radius: 10rpx;
        color: #1989fa;
        padding: 6rpx 8rpx;
    }
}
.lenged{
    position: absolute;
    top: 16rpx;
    right: 20rpx;
    width: 36vw;
    padding: 10rpx 18rpx;
    .wancheng{
        width: 100%;
        .timu{
            color: #999;
        }
    }
}
::v-deep .u-drawer{
    z-index: 1110000!important;
}
</style>
